<template>
	<view >
		<view class="uni-column content" v-if="type==1">
			<view  class="level" v-for="(item, index) of fmtLevel" :key='index' :style="{width:item.width,backgroundColor:item.backColor}" >{{item.vtext}}</view>		
		</view>
		<view class="uni-column content" v-else-if="type==2">
			<view   class="level" v-for="(item, index) of fmtReverst" :key='index' :style="{width:item.width,backgroundColor:item.backColor}" >{{item.vtext}}</view>
		</view>
		<view class="uni-column content" v-else-if="type==3">
			<view   class="level" v-for="(item, index) of fmtSqure" :key='index' :style="{width:item.width,backgroundColor:item.backColor}" >{{item.vtext}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			level: {
				type: Number,
				default: 5
			},
			type: {
				type: Number,
				default: 1
			},
			positionVal:{
				type:Array,
				default: function(){
					return [10,15,20,25,30]	
				} 
			},
			coloarVal:{
				type:Array,
				default: function(){
					return ['#F5F5F5','#E5E5E5','#D5D5D5','#C5C5C5','#B5B5B5']	
				} 
			}
		},	

		computed:{
			fmtLevel: function(){
				let levelResult=[]		
				console.log(this.level)
				console.log(this.positionVal)
				for (var i = 1; i <= this.level; i++) {					
					levelResult.push({
						width: 100*i+'upx',
						vtext: this.positionVal[i-1]+'%',
						backColor:this.coloarVal[i-1]
					})
				}
				return levelResult
			},
			fmtReverst: function(){
				let levelResult=[]				
				for (var i = this.level; i >=1; i--) {					
					levelResult.push({
						width: 100*i+'upx',
						vtext: this.positionVal[i-1]+'%',
						backColor:this.coloarVal[i-1]
					})
				}		
				console.log(levelResult)
				return levelResult
			},
			fmtSqure: function(){
				let levelResult=[]				
					for (var i = 1; i <= this.level; i++) {				
					levelResult.push({
						width: '300upx',
						vtext: '20%',
						backColor:this.coloarVal[i-1]
					})
				}		
				console.log(levelResult)
				return levelResult
			}
		},
		
		methods: {
			
		}
	}
</script>

<style>
	view {
	/* 	border: #000000 1px solid; */
	}
	
	.content{
		justify-content: center;
		align-items: center;	
		
	}

     .level{
		 /* width: 200upx; */
		 justify-content: center;
		 align-items: center;
		 display:inline-flex;	
		 border: #888888 1px solid;
		 height: 35upx;
	 }
</style>
